 <template>
    <div class="container-fluid container-med2" style="width:1200px; ">
    <el-form class="el2" ref="form" :model="form" label-width="80px">
        <h1>查看实验</h1>
        <div style="width:1000px">
            <el-form-item label="实验题目:">
                 {{form.title}}
            </el-form-item>
            <el-form-item label="实验目的:" >
                {{form.purpose}}
            </el-form-item>
            <el-form-item label="实验内容:">
                {{form.content}}
            </el-form-item>
            <div v-for="(item,index) in stepData">
                <el-form-item label="实验步骤:">
                    <p >
                        {{item}}
                    </p>
                </el-form-item>
                <el-form-item>
                    <p>
                        {{purpose[index]}}
                    </p>
                </el-form-item>
            </div>
            <el-form-item label="发布时间:">
                {{form.beginDate}}
            </el-form-item>
            <el-form-item label="截止时间:">                     
                {{form.endDate}}
            </el-form-item>
            <el-form-item label="备注:">
                {{form.desc}}
            </el-form-item>
        </div>
            <el-button type="primary" @click="back">返回</el-button>
        </el-form>
     </div>


</template>  
<script>
    import { mapState } from 'vuex'
import axios from 'axios'
  export default {
    data() {
      return {
        stepData :[

        ],
        form: {
            title:'',
            purpose: '',
            content: '',
            step:'',
            beginDate: '',
            endBate: '',
            desc: '',

        },
        addForm:{
            name: '',
            judge: -1,
        },
        fileList: [
            {name: '',url: ''}]
      };
    },
      computed: {
          student(){
              return this.$store.state.student
          },
          purpose(){
              for(var e of this.student.experiment){
                  if(e[0]==this.form.title){
                      var purpose = e[1].split(',')
                      return purpose
                  }
                      
                  
                  
              }
          },

      },
    methods: {
        
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        onSubmit() {
            console.log('submit!');
        },
        back() {
            console.log(this.purpose)
            this.$confirm('是否返回?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                });
                this.$router.go(-1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已返回'
                });
            });

        },
        created:function () {
           return this.$store.state.detail2;
        }

    },
    mounted:function(){
      var params = new URLSearchParams();
      params.append('title',this.$route.query.title)
      var _this = this;
      axios.post('/experiment/getExperiment',params).then(function(res){
        res.data.getEx.startDate=res.data.getEx.startDate.substring(0,10);
        res.data.getEx.endDate=res.data.getEx.endDate.substring(0,10);
        res.data.getEx.step=res.data.getEx.step[0].split(',')
        _this.form.title=res.data.getEx.title;
        _this.form.purpose=res.data.getEx.purpose;
        _this.form.content = res.data.getEx.content;
        _this.stepData= res.data.getEx.step;
        _this.form.beginDate = res.data.getEx.startDate;
        _this.form.endDate = res.data.getEx.endDate;
        _this.form.desc = res.data.getEx.remark;
        console.log(res.data.getEx);
      })
      if(this.$route.query.account){
          var params2 = new URLSearchParams();
          params2.append('account',this.$route.query.account);
          var _this = this;
          axios.post('/user',params2).then(function(res){
              _this.$store.commit('student',res.data.signin_user);
          })
      }else{
          this.$store.state.student=this.$store.state.user
      }
    }
  }
</script>

<style>
.container-med2{
    margin-top: 160px;
    margin: 0 auto ;
    -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
    box-shadow:1px px 15px rgba(144, 144, 144, 1);
  }
.el2{
    padding-top: 20px;
    padding-right: 70px;
    padding-left: 70px;
    padding-bottom: 50px;
}
.el2 el-form-item{
    font-size: 50px;
}
.input1{
    border:0px;
}
</style>